@import '../../theme';
@import '../../mixins';
@import '~bootstrap/scss/pagination';

$cx-pagination-page-action-trbl-padding: 11px 14px 12px 14px !default;
$cx-pagination-page-action-color: 'secondary' !default;

$cx-pagination-page-link-trbl-padding: 12px 17px 12px 17px !default;
$cx-pagination-page-link-color: 'text' !default;
$cx-pagination-page-link-height: 48px !default;
$cx-pagination-page-link-hover-color: 'inverse' !default;
$cx-pagination-page-link-hover-background-color: 'primary' !default;

$cx-pagination-page-link-disabled-color: 'light' !default;

.page-item {
  &.disabled {
    .page-link {
      &[aria-label='Previous'],
      &[aria-label='Next'] {
        @include var-color('color', $cx-pagination-page-link-disabled-color);
      }
    }
  }

  .page-link {
    padding: $cx-pagination-page-link-trbl-padding;
    font-size: $h4-font-size;
    height: $cx-pagination-page-link-height;
    @include var-color('color', $cx-pagination-page-link-color);

    &:hover {
      @include var-color(
        'background-color',
        $cx-pagination-page-link-hover-background-color
      );
      @include var-color('color', $cx-pagination-page-link-hover-color);
      font-weight: $font-weight-bold;
    }

    &[aria-label='Previous'],
    &[aria-label='Next'] {
      padding: $cx-pagination-page-action-trbl-padding;
      @include var-color('color', $cx-pagination-page-action-color);

      &:hover {
        @include var-color('color', $cx-pagination-page-link-hover-color);
      }
    }
  }
}
